<template>
 <div class="table">
    <div class="crumbs">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-tickets"></i>文章添加</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
              <!-- 表格 -->
    <div class="container">
            <el-form    class="demo-form-inline">
                <el-form-item label="标题"  >
                    <el-input   v-model="BeautyData.BeautyTitle" placeholder="标题"></el-input>
                </el-form-item>
                <el-form-item label="
                作者"  >
                    <el-input   :disabled="true" v-model="BeautyData.Beautyper" :value="BeautyData.Beautyper" placeholder="作者"></el-input>
                </el-form-item>
                <el-form-item label="时间"  >
                    <el-input   :disabled="true" v-model="BeautyData.BeautyTime" :value="BeautyData.BeautyTime" placeholder="时间"></el-input>
                </el-form-item>
                 <el-form-item label="分类"  >
                    <el-input   v-model="BeautyData.BeautyType"  placeholder="分类"></el-input>
                </el-form-item>
                <el-form-item>
                    <quill-editor ref="myTextEditor"  v-model="BeautyData.BeautyContent"   id="editors"  ></quill-editor>
                </el-form-item>
                 <el-form-item class="editor-btn" >
                    <el-button     type="primary" @click="submit">提交</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import utils from '../../../utils/index.js'
export default {
  data () {
    return {
      inputwidth: 'width:300px',
      BeautyData: {
        BeautyTime: '',
        Beautyper: utils.storage.get('ms_username').username
      },
      EditId: ''
    }
  },
  components: {
    quillEditor
  },
  created () {
    if (this.$route.query.id != undefined) {
      this.EditId = this.$route.query.id
      this.getID(this.EditId)
    } else {
      var date = new Date()
      this.BeautyData.BeautyTime = utils.formatDate('yyyy-MM-dd hh:mm', date) // utils.formatDates(date, 'yyyy-MM-dd hh:mm');
    }
  },
  methods: {

    delelte ($id) {
      this.post('Delete/' + $id
      )._then((res) => {
        console.log(res)
      })
        .catch((err) => {

        })
    },
    // 查看详情
    getID ($id) {
      this.get('Beautygetid/' + $id)
        .then(res => {
          if (res.data.code == 200) {
            this.BeautyData = res.data.data
          } else {
            this.$message({
              message: '失败',
              type: 'err'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 提交的时候
    submit () {
      var _this = this, url = 'Beautyadd'

      if (_this.EditId != '') {
        url = '/BeautyEdit/' + _this.EditId
      }

      _this
        .post(url, _this.BeautyData)
        .then(resources => {
          if (resources.data.code == 200) {
            _this.$message({
              message: resources.data.msg,
              type: 'success'
            })

            _this.$router.push('/Beautylist')
          } else {
            _this.$message({
              message: resources.data.msg,
              type: 'error'
            })
          }
        })
        .catch(err => {
          _this.$message({
            message: err.msg,
            type: 'error'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.container {
  .el-input,
  .el-textarea__inner,
  .el-slider,
  .el-select {
    max-width: 50%;
  }
}
.editor-btn {
  text-align: center;
}
</style>
